<template>
	<view class="home">
		<view class="topnav">
			<view class="logo">
				<image src='@/static/logo.png' alt="渝展红图"></image>
			</view>
			<view class="btns">
				<button @click="toTabao" class='btn'>文创推荐</button>
				<button @click="toFieldLis" class='btn'>战地列表</button>
				<img class="return" @click="rebackMap" v-show="isreturn" src="@/static/return.svg" alt=""
					style="z-index: 999; position: absolute; left: -50px; top: -3px" />
			</view>
		</view>
		<view class="wrap">
			<mpvue-echarts id="main" ref="mapChart" :echarts="echarts" @onInit="getData" />
		</view>
		<view>
			<!-- 普通弹窗 -->
			<uni-popup ref="popup" background-color="#fff">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<view class="content">
						<text style="margin-right: auto;font-size: 20px;margin-bottom: 20px;">阵地区域:{{areaName}}</text>
						<uni-table border stripe emptyText="暂无更多数据">
							<uni-tr>
								<uni-th align="center" width='100px'>阵地名</uni-th>
								<uni-th align="center">简介</uni-th>
								<uni-th align="center" width='30px'>操作</uni-th>
							</uni-tr>
							<uni-tr v-for="(item,index) in dialogList" :key="index">
								<uni-td align="center">{{item.position_name}}</uni-td>
								<uni-td align="center">{{item.position_intro}}</uni-td>
								<uni-td align="center">
									<view class="btn" @click='toDetail(item)' style="width: 20px;">
										详情
									</view>
								</uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</view>
			</uni-popup>

		</view>
	</view>
</template>

<script>
	import * as echarts from 'echarts/echarts.min.js';
	import * as chongqing from '../../echarts/map/json/chongqing.json';
	import mpvueEcharts from 'mpvue-echarts';


	export default {
		data() {
			return {
				echarts,
				dialogTitle: null,
				type: 'center',
				data: [],
				infoList: [],
				dialogList: [],
				areaName: ""
			};
		},
		components: {
			mpvueEcharts
		},
		methods: {
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			// 获取战地数据
			async getData(e) {
				await this.$api.territoryManagement.getAll()
					.then((res) => {
						this.infoList = res;
						let this_ = this
						res.forEach((item) => {
							let index = this_.data.findIndex((element) => element.name === item.district);
							if (index !== -1) {
								// 如果data已经包含了该名称，将对应的值加1
								this_.data[index].value++;
							} else {
								// 如果data不包含该名称，将新的参数添加到data中
								let params = {
									name: item.district,
									value: 1 // 初始值为1
								};
								this_.data.push(params);
							}
						});
					})
					.catch((error) => {
						console.error('An error occurred while fetching data:', error);
					});

				this.renderMap(e);
			},

			renderMap(e) {
				const that = this;
				var mydata = that.data;
				let {
					canvas,
					width
				} = e;
				width = width - 20;
				let height = width

				echarts.setCanvasCreator(() => canvas);
				const chart = echarts.init(canvas, null, {
					width: width,
					height: height
				})
				echarts.registerMap('chongqing', chongqing);
				canvas.setChart(chart)
				var optionMap = {
					tooltip: {
						trigger: 'item',
						formatter: '{b}:{c}阵地'
					},
					visualMap: {
						min: 0,
						max: 25,
						left: 'left',
						top: 'bottom',
						inRange: {
							color: ['#f4eee3', '#f2b95b'] //取值范围的颜色
						},
						show: false, //图注
						hoverLink: true,
						textStyle: {
							fontSize: 8
						},
					},
					geo: {
						map: 'chongqing',
						roam: true, // 开启缩放和平移功能
						zoom: 1.3, // 初始的缩放比例
						label: {
							normal: {
								show: false,
								fontSize: 8,
								color: 'rgba(0, 0, 0, 0.5)' //文字颜色
							}
						},
						itemStyle: {
							normal: {
								borderColor: 'rgba(0, 0, 0, 0.2)' //省份边框颜色
							},
							emphasis: {
								areaColor: '#F3B329', //鼠标选择区域颜色
								shadowOffsetX: 0,
								shadowOffsetY: 0,
								shadowBlur: 20,
								borderWidth: 0,
								shadowColor: 'rgba(0, 0, 0, 0.2)' //选择后的边框阴影颜色
							}
						}
					},
					//配置属性
					series: [{
						type: 'map',
						geoIndex: 0,
						animation: false,
						data: mydata,
					}]
				};
				//初始化echarts实例
				chart.setOption(optionMap);
				this.$refs.mapChart.setChart(chart);
				chart.on("click", (params) => {
					let name = params.name;
					this.areaName = name
					let this_ = this;
					this.dialogList = this.infoList.filter((item) => {
						return item.district.includes(name);
					});
					this.toggle("center")
				})
			},

			// 打开淘宝
			toTabao() {
				const url =
					'https://shop355131377.m.taobao.com/?refer=https%3A%2F%2Fshopsearch.taobao.com%2F&spm=a230r.7195193.1997079397.2.75f86e88H8n4FJ'
				wx.getSystemInfo({
					success: function(res) {
						if (res.platform === 'ios') {
							// iOS系统处理
							wx.showModal({
								title: '提示',
								content: 'iOS暂不支持直接跳转，请使用浏览器访问淘宝',
								showCancel: false,
								success: function(res) {
									if (res.confirm) {
										wx.navigateTo({
											url: '/pages/webview/webview?url=' +
												encodeURIComponent(
													'https://shop355131377.m.taobao.com/?refer=https%3A%2F%2Fshopsearch.taobao.com%2F&spm=a230r.7195193.1997079397.2.75f86e88H8n4FJ'
												)
										});
									}
								}
							});
						} else {
							// Android系统处理
							wx.navigateTo({
								url: '/pages/webview/webview?url=' + encodeURIComponent(url)
							});
						}
					}
				});
			},
			// 查看战地列表
			toFieldLis() {
				uni.navigateTo({
					url: '../../pages/fieldLis/fieldLis'
				})
			},

			// 查看详情
			toDetail(row) {
				console.log(111);
				let detailInfo = JSON.stringify(row)
				uni.navigateTo({
					url: '../../pages/detail/detail',
					success(res) {
						res.eventChannel.emit("detailInfo", {
							data: detailInfo,
						})
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.home {
		width: 100%;
		height: 100vh;
		background-image: url('https://gd-hbimg.huaban.com/83d403c28f3298a8dc4653836cd16fdf4f6649186b14f9-AnXh6w_fw240webp');
		background-size: cover;
		background-repeat: no-repeat;
		display: flex;
		flex-flow: column nowrap;

		.topnav {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20px;

			.logo {
				width: 30%;
				height: 50px;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.btns {
				position: relative;
				display: flex;

				.btn {
					min-width: 80px;
					font-size: 0.8rem;
					background: rgba(255, 255, 255, 0.3);
					color: #fff;
					border: 1px solid #fff;
					margin-right: 3px;
				}
			}

			.return {
				width: 40px;
				height: 40px;
			}
		}

		.map {
			width: 100vw;
			flex: 1;
			background-size: cover;
		}

		.positionList {
			display: flex;
			height: 10%;
			justify-content: space-between;
		}

		/deep/ .cell {
			overflow: hidden; //超出的文本隐藏
			text-overflow: ellipsis; //溢出用省略号显示
			white-space: nowrap; //溢出不换行
		}

		.wrap {
			width: 100%;
			height: 70%;
			position: absolute;
			top: 50%;
			transform: translate(2%, -41%);
		}

		.popup-content {
			display: flex;
			flex-flow: column nowrap;
			align-items: center;
			justify-content: center;
			height: 500px;
			background-color: #fff;
			margin: auto;
			padding: 10px;

			.content {
				min-width: 320px;
				height: 100%;
				opacity: 1;
				display: flex;
				flex-flow: column nowrap;
				align-items: center;
			}
		}
	}

	/deep/.uni-table {
		min-width: 320px !important;
	}
</style>